<template>
  <div class="color-picker">
    <div class="color-picker__container">
      <input type="color" :value="colors[0]" @input="onChangeColor(($event.target as any).value)" />
    </div>
    <ul class="color-picker__list">
      <li class="color-picker__list__color-item" v-for="(color, index) in colors" :key="index">
        <div
          :style="{ backgroundColor: color }"
          v-if="color.startsWith('#')"
          @click.prevent="onChangeColor(color)"
        ></div>
        <div :class="`transparent-back`" @click.prevent="onChangeColor(color)" v-else></div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType } from 'vue'

const defaultColors = [
  '#ffffff',
  '#f5222d',
  '#fa541c',
  '#fadb14',
  '#52c41a',
  '#1890ff',
  '#722ed1',
  '#8c8c8c',
  '#000000',
  ''
]
export default defineComponent({
  name: 'color-picker',
  props: {
    value: {
      type: String
    },
    colors: {
      type: Array as PropType<string[]>,
      default: defaultColors
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const onChangeColor = (color: string) => {
      emit('change', color)
    }
    return {
      onChangeColor
    }
  }
})
</script>

<style lang="scss" scoped>
@include b(color-picker) {
  display: flex;
  width: 200px;
  height: 50px;
  @include e(container) {
    width: 40%;
    & input {
      width: 100%;
      height: 100%;
    }
  }
  @include e(list) {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    @include e(color-item) {
      width: 20%;
      height: 25px;
      min-width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      & div {
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
      }
      @include m(transparent-back) {
        background: url('@/assets/transparent.png') no-repeat;
      }
    }
  }
}
</style>
